<template>
	<div class="resource_data">
		<div class="data">
			<stat-data title="资源总数" :value="resourceCount.total" unit="个" icon="resource-total"></stat-data>
			<stat-data title="今日新增" :value="resourceCount.added" unit="个" icon="resource-added"></stat-data>
			<stat-data title="今日下载" :value="resourceCount.download" unit="次" icon="resource-download"></stat-data>
			<stat-data title="访问数量" :value="resourceCount.browse" unit="次" icon="resource-browse"></stat-data>
		</div>
		<el-radio-group size="mini" v-model="timeRanges">
			<el-radio-button label="1">今天</el-radio-button>
			<el-radio-button label="2">昨天</el-radio-button>
			<el-radio-button label="3">本月</el-radio-button>
			<el-radio-button label="4">上月</el-radio-button>
		</el-radio-group>
		<div class="chart" ref="resDataChart"></div>
	</div>
</template>

<script>
import moment from 'moment';
import statData from './statData';
import * as echarts from 'echarts';
import eleResize from 'element-resize-detector';
import { getHomeEchartStat } from '@/api/statistics';
export default {
	components: { statData },
	props: {
		data: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		const pageViewColor = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: '#166AC2' },
			{ offset: 1, color: '#15D2A5' }
		]);
		const downloadColor = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: '#B72525' },
			{ offset: 1, color: '#FBAB33' }
		]);
		return {
			timeRanges: '1',
			resourceStat: {},
			swchart: null,
			chartOption: {
				title: { text: '时段访问数据', top: 0, left: 16, padding: [8, 0], textStyle: { fontSize: 16, lineHeight: 16 } },
				legend: {
					top: 0,
					left: 120,
					padding: 8,
					icon: 'rect',
					itemHeight: 4,
					itemWidth: 40,
					data: [
						{ name: '访问量', itemStyle: { color: pageViewColor } },
						{ name: '下载量', itemStyle: { color: downloadColor } }
					]
				},
				grid: { top: 48, left: 16, right: 16, bottom: 16, containLabel: true },
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
							formatter: (params) => {
								if (params.axisDimension === 'x') {
									if (params.value.includes(':')) {
										return params.value;
									} else if (params.value.includes('-')) {
										let vals = params.value.split('-');
										return `${vals[0]}\n${vals[1]}-${vals[2]}`;
									}
								} else if (params.axisDimension === 'y') {
									return parseInt(params.value * 1000) / 1000;
								}
							}
						}
					}
				},
				xAxis: {
					name: '时间',
					nameGap: 0,
					nameRotate: 270,
					nameTextStyle: { align: 'right', color: '#909399' },
					type: 'category',
					splitLine: { show: true, lineStyle: { color: '#E6EBF0' } },
					axisLabel: {
						color: '#8D9094',
						formatter(value, index) {
							if (value.includes(':')) {
								return value;
							} else if (value.includes('-')) {
								let vals = value.split('-');
								return `${vals[0]}\n${vals[1]}-${vals[2]}`;
							}
						}
					},
					axisTick: false,
					axisLine: { lineStyle: { color: '#E6EBF0' } },
					// boundaryGap: false,
					data: []
				},
				yAxis: {
					name: '数量',
					nameGap: 0,
					nameTextStyle: { align: 'left', color: '#909399' },
					type: 'value',
					axisLabel: { color: '#8D9094' },
					axisLine: { lineStyle: { type: 'dotted', color: '#E6EBF0' } },
					splitLine: { lineStyle: { type: 'dotted', color: '#E6EBF0' } }
				},
				series: [
					{
						name: '访问量',
						type: 'line',
						smooth: true,
						showSymbol: false,
						itemStyle: { normal: { lineStyle: { type: 'solid', color: pageViewColor } } },
						areaStyle: { opacity: 0.1, color: pageViewColor },
						data: []
					},
					{
						name: '下载量',
						type: 'line',
						smooth: true,
						showSymbol: false,
						itemStyle: { normal: { lineStyle: { type: 'solid', color: downloadColor } } },
						areaStyle: { opacity: 0.1, color: downloadColor },
						data: []
					}
				]
			}
		};
	},
	computed: {
		resourceCount() {
			let daySumResult = this.data.daySumResult || {};
			return {
				total: this.data.zyAllCount || 0,
				added: daySumResult.addSum || 0,
				download: daySumResult.downSum || 0,
				browse: daySumResult.browseSum || 0
			};
		}
	},
	watch: {
		data(data) {
			this.resourceStat = data.statResult;
		},
		timeRanges(value) {
			this.getEchartsData(value);
		},
		resourceStat() {
			this.$nextTick(() => {
				this.formatEchartsData();
				this.swchart.setOption(this.chartOption, true);
			});
		}
	},
	mounted() {
		this.initializeEcharts();
	},
	methods: {
		//初始化图表
		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.resDataChart);
			eleResize().listenTo(this.$refs.resDataChart, (ele) => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
		},

		//获取图表数据
		async getEchartsData(type) {
			let result = await getHomeEchartStat(type).then((res) => res.data);
			if (result.code === '0') {
				this.resourceStat = this.$detailData(result.data);
			}
		},

		//格式化图表数据
		formatEchartsData() {
			let stat = this.resourceStat;
			if (!stat) return false;
			if (this.timeRanges === '1' || this.timeRanges === '2') {
				this.chartOption.xAxis.data = stat.xdata.map((n) => n + ':00');
			} else {
				this.chartOption.xAxis.data = stat.xdata;
			}
			this.chartOption.series[0].data = stat.ybData.map((n) => Number(n));
			this.chartOption.series[1].data = stat.ydData.map((n) => Number(n));
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_data {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	height: calc(100% - 16px);
	border-radius: 8px 8px 4px 4px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;

	.data::v-deep {
		display: flex;
		height: 88px;
		border-radius: 8px;
		padding: 16px;
		background-color: #2074c7;
	}

	.chart {
		flex: 1;
		overflow: hidden;
		margin-top: 17px;
	}

	.el-radio-group::v-deep {
		position: absolute;
		top: 136px;
		right: 15px;
		background-color: #eef1f5;
		z-index: 2;
		padding: 4px;

		.el-radio-button__inner {
			color: #303133;
			border: none;
			box-shadow: none;
			padding: 6px 10px;
			background: transparent;
		}

		.is-active .el-radio-button__inner {
			border-radius: 4px;
			background-color: #fff;
		}
	}
}
</style>
